<template>
  <div class="fourlist-wrapper">
    <h3>品牌制造商直供</h3>
    <div class="fourlist">
      <div class="box" v-for="item in gofourlist" :key="item.id">
        <img :src="item.pic_url" alt />
        <ul>
          <li>{{item.name}}</li>
          <p>{{item.floor_price |　componentFilter}}</p>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["gofourlist"]
};
</script>

<style lang="less" scpoed>
.fourlist-wrapper {
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 10px;
  h3 {
    text-align: center;
    font-weight: normal;
    padding: 10px 0;
  }
}
.fourlist {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .box {
    width: 49%;
    position: relative;
    img {
      height: 126px;
      width: 100%;
      display: block;
      margin-bottom: 6px;
    }
    ul {
      position: absolute;
      top: 0;
      left: 0;
      padding: 10px;
      // background-color: rgba(238, 235, 235, 0.1);
    }
    p {
      color: #666;
    }
  }
}
</style>